<template>
  <div >
    <div id="container"></div>
    <div id="panel"></div>
  </div>
</template>



<script>
// 添加高德安全密钥
import * as AMapLoader from "@amap/amap-jsapi-loader";
import { location } from "@/utils/Location";

window._AMapSecurityConfig = {
  securityJsCode: "846a7bbb2315c4f9d0f4fc4d66b03114"
};

export default {

  name: "EmployeeGPS",
  data(){
    return{
      map: null,
      /*//用户的经度
      plng:0,
      //用户的维度
      plat:0,*/
      //目的地经纬度
      /*terminal:[],*/
      //目的地的名字


    };
  },
  mounted() {
    this.initAMap()

  },
  methods: {

    // 获取目的地地址，路线规划
    initAMap() {
      const _this = this;
      console.log(_this.$store.getters.getCity)
      axios.get(`http://localhost:8099/user/take/${_this.$store.getters.getCity}`)
          .then(res=>{
            console.log(res.data[0])
            const tlng=res.data[0].longitude
            const tlat=res.data[0].latitude
            console.log("起点经度"+_this.$store.getters.getPlng)
            console.log("起点纬度"+_this.$store.getters.getPLat)
            console.log("终点经度"+tlng)
            console.log("终点纬度"+tlat)

            AMapLoader.load({
              key: "ce49a4f8ed20d5ea9b21516aaddbf456", //设置您的key
              version: "1.4.15",
              plugins: ["AMap.ToolBar", "AMap.Driving","AMap.Geolocation"],
              AMapUI: {
                version: "1.1",
                plugins: []
              },
              Loca: {
                version: "1.4.15"
              }
            }).then(AMap => {
              this.map = new AMap.Map("container", {
                viewMode: "3D",
                zoom: 12,
                zooms: [2, 22],
                center: [119.94697362184525,31.77275127744361]
              });

              var driving = new AMap.Driving({
                map: this.map,
                panel:"panel",

              });

              /*axios.get('http://localhost:8099/driver/waypoint').then(res=>{
                console.log(res.data[0])
                const waypoints=res.data
                _this.$store.commit("SET_WAYPOINTS",waypoints)
              })
              console.log(_this.$store.getters.getWaypoints[0].latitude);
              console.log(_this.$store.getters.getWaypoints[0].longitude);*/
              driving.search(

                  new AMap.LngLat(this.$store.getters.getPlng,this.$store.getters.getPLat),
                  new AMap.LngLat(tlng,tlat),
                  /*{
                    waypoints:[
                      new AMap.LngLat(_this.$store.getters.getWaypoints[0].longitude,_this.$store.getters.getWaypoints[0].latitude)
                    ]
                  },*/
                  function(status, result) {
                    // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                    if (status === "complete") {
                      console.log("绘制驾车路线完成");
                    } else {
                      console.log("获取驾车数据失败：" + result);
                    }
                  }
              );
            }).catch(e => {
              console.log(e);
            })

          })

    },

  }
};
</script>
<style scoped>

#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
}

#panel {
  position: fixed;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  width: 280px;
}
#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
#panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
</style>


